<template>
<m-form 
  :schema="formSchema" 
  ref="formRef" 
  @reset="handleReset"
  @ok="handleOk"
 :model="formState" 
 :labelCol="{flex: '120px'}" 
 :rules="formRules">
  <template #name>
    <a-form-item :has-feedback="true" name="name" label="岗位名称-2">
    <a-input placeholder="请输入岗位名称" v-model:value="formState.name" />
    </a-form-item>
  </template>
  <template #detail>
    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button @click="handleDetail" type="primary">编辑回显</a-button>
    </a-form-item>
  </template>
</m-form>
<div ref="conRef"></div>
</template>
<script setup lang="ts">
import { h, onMounted, reactive,ref } from 'vue'
import type { Rule } from 'ant-design-vue/es/form';
import { Button, message } from 'ant-design-vue';
import { postSave,postDetail,postUpdate } from '/@/api/sys/post'
import { DeleteOutlined, HeartFilled, HeartOutlined, OneToOneOutlined, SettingOutlined, SmileOutlined } from '@ant-design/icons-vue';
const conRef = ref()
const formState = reactive({
  id: undefined,
  name: '岗位名称1',
  code: 'c111',
  radio1: true,
  radioGroup1: 1,
  rate1: 3,
  slider1: 30,
  switch1: true,
  checkbox1: true,
  transfer: {
    selectedKeys: ['1'],
    targetKeys: ['1']
  },
  upload: '1,2,3'
})
const formRef = ref()
// 自定义校验岗位名称
let checkName = async (_rule: Rule, value: string) => {
  if (!value) {
    return Promise.reject('请输入岗位名称');
  }
  if(value.length<2) {
    return Promise.reject('岗位名称长度不能小于2');
  }
  return Promise.resolve()
};
const formRules = ref({
  "name": [{
    required: true,
    trigger: 'change',
    validator: checkName
  }],
  "code": [{
    required: true,
    message: '请输入唯一编码',
    trigger: 'change'
  },{
    message: '唯一编码以字母开头，1~32位字母、下划线、数字构成',
    trigger: 'change',
    // 以字母开头，1~32位字母、下划线、数字构成
    pattern: '^[a-zA-Z][a-zA-z_0-9]{0,31}$'
  }]
})

const handleDetail = () =>{

  postDetail({
    id: 1
  }).then(res=>{
    Object.keys(formState).forEach(key=>{
      formState[key] = res.data[key]
    })
  })
}
// 表单元数据
const formSchema = ref({
  labelCol:{flex: '120px'},
  rules: formRules,
  showOk: true,
  okText: '提交啊',
  showReset: true,
  resetText: '重置啊',
  // api: '/sys/post/save',
  // api: postUpdate,
  api: (values: any)=>{
    const fun = values.id?postUpdate:postSave
    return fun(values)
  },
  columns: [{
    name: 'id',
    label: 'ID',
    style: {
      display: 'none'
    }
  },{
    hasFeeback: true,
    name: 'name',
    label: '岗位名称',
    component: 'Input',
    componentProps: {
      placeholder: '请输入岗位名称'
    }
  },{
    hasFeeback: true,
    name: 'code',
    label: '岗位编码11',
    component: 'Input',
    defaultValue: 'default_code',
    componentProps: {
      placeholder: '请输入岗位编码',
      allowClear: true,
      showCount: true,
      prefixIcon: 'SettingOutlined',
      // prefix: 'SettingOutlined',
      suffixIcon: 'CopyOutlined',
      // addonAfter: 'addonAfter==String',
      // addonAfter: h('div',{},'addonAfter==Object'),
      addonAfter(){
        return h(OneToOneOutlined)
      },
      addonBefore: h('div',{},'addonBefore==Object'),
      onPressEnter(e: any) {
        console.log(e)
      }
    }
  },{
    hasFeeback: true,
    name: 'sort',
    label: '排序',
    component: 'InputNumber',
    componentProps: {
      placeholder: '请输入排序',
      step: 5,
      prefixIcon: 'SettingOutlined',
      addonAfter(){
        return h(OneToOneOutlined)
      },
    }
  },{
    hasFeeback: true,
    name: 'type',
    label: '类型',
    component: 'Select',
    componentProps: {
      placeholder: '请选择类型',
      api: '/test/lv',
      suffixIcon(){
        return h(HeartFilled)
      },
      dropdownRenderBefore(){
        return h('div',{
          style: {
            padding: '4px 8px',
            cursor: 'pointer'
          }
        },'dropdownRenderBefore')
      },
      dropdownRenderAfter(){
        return h('div',{
          style: {
            padding: '4px 8px',
            cursor: 'pointer'
          }
        },[h(Button,{
          type: 'link',
          onMousedown(e: any){
            e.preventDefault()
          },
          onClick(){
            const size = formRef.value.getComponentRef('type').getOptions()?.length
            formRef.value.getComponentRef('type').addOption({
              label: '类型'+(size+1),
              value: size+1
            })
          }
        },{
          default(){
            return "添加"
          }
        })])
      },
    }
  },{
    name: 'radio1',
    label: '单选框',
    component: 'Radio',
    componentProps: {
      placeholder: '请选择'
    }
  },{
    hasFeeback: true,
    name: 'radioGroup1',
    label: '单选组',
    component: 'RadioGroup',
    componentProps: {
      placeholder: '请选择',
      api: '/test/lv'
    }
  },{
    hasFeeback: true,
    name: 'mentions1',
    label: '提及',
    component: 'Mentions',
    componentProps: {
      placeholder: '请输入',
      options: [{
        value: "afc163"
      },{
        value: "类型2"
      }],
      onChange(e: any){
        console.log(e)
      }
    }
  },{
    hasFeeback: true,
    name: 'rate1',
    label: '评分',
    component: 'Rate',
    componentProps: {
      placeholder: '请选择',
      count: 10,
      character(){
        return h(HeartOutlined)
      }
    }
  },{
    hasFeeback: true,
    name: 'slider1',
    label: '滑动输入条',
    component: 'Slider',
    componentProps: {
      mark(data: any) {
        if(data.point>=40) {
          return h('span',{
            style: {
              color: 'red'
            }
          },data.label)
        } else {
          return h('span',{},data.label)
        }
      },
      marks: {
        0: '0°C',
        26: '26°C',
        37: '37°C',
        50: '50°C',
      }
    }
  },{
    name: 'switch1',
    label: '开关',
    component: 'Switch',
    componentProps: {
      placeholder: '请选择',
      checkedChildren() {
        return "打开"
      },
      unCheckedChildren: "关闭"
    }
  },{
    name: 'autoComplete1',
    label: '自动完成',
    component: 'AutoComplete',
    componentProps: {
      // placeholder: '请选择',
      options: [{
        value: "afc163",
      },{
        value: "类型2",
      }],
      // option(data: any){
      //   return h('span',{},data.value+'$$$')
      // },
      option(data: any){
        return data.value
      },
      api: '/test/autoComplete',
      // onSearch(searchText: string){
      //   const mockVal = (str: string, repeat = 1): any => {
      //     return {
      //       value: str.repeat(repeat),
      //     };
      //   };
      //     const a = !searchText
      //     ? []
      //     : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 5)];
      //     formRef.value.getComponentRef('autoComplete1').setOptions(a)
      //   },
      //   default(){
      //     return h(InputSearch,{
      //       placeholder: '请输入'
      //     })
      //   }
    }
  },{
    name: 'cascader1',
    label: '级联选择',
    component: 'Cascader',
    componentProps: {
      placeholder: '请选择',
      suffixIcon(){
        return h(SmileOutlined)
      },
      api: '/test/cascader'
    }
  },{
    name: 'checkbox1',
    label: '多选框',
    component: 'Checkbox',
    componentProps: {
      placeholder: '请选择'
    }
  },{
    hasFeeback: true,
    name: 'checkboxGroup1',
    label: '多选框组',
    component: 'CheckboxGroup',
    componentProps: {
      placeholder: '请选择',
      api: '/test/lv'
    }
  },{
    hasFeeback: true,
    name: 'datepicker',
    label: '日期',
    component: 'DatePicker',
    componentProps: {
      placeholder: '请选择日期',
      nextIcon() {
        return h(SettingOutlined)
      },
      dateRender(data: any) {
        return h('span',{
          style: {
            color: 'red'
          }
        },data?.current.date());
      }
    }
  },{
    hasFeeback: true,
    name: 'rangepicker',
    label: '日期',
    component: 'RangePicker',
    componentProps: {
      placeholder: ['请选择开始日期','请选择结束日期']
    }
  },{
    hasFeeback: true,
    name: 'timePicker',
    label: '时间',
    component: 'TimePicker',
    componentProps: {
      placeholder: '请选择时间',
      clearIcon() {
        return h(DeleteOutlined)
      },
      suffixIcon(){
        return h(SettingOutlined)
      },
      renderExtraFooter(){
        return h('span',{},'自定义内容区')
      }
    }
  },{
    hasFeeback: true,
    name: 'timeRangePicker',
    label: '时间区间',
    component: 'TimeRangePicker',
    componentProps: {
      placeholder: ['请选择开始时间','请选择结束时间'],
      clearIcon():any {
        return h(DeleteOutlined)
      },
      suffixIcon():any{
        return h(SettingOutlined)
      },
      renderExtraFooter(){
        return h('span',{},'自定义内容区')
      }
    }
  },{
    hasFeeback: true,
    name: 'transfer',
    label: '穿梭框',
    component: 'Transfer',
    componentProps: {
      // dataSource: [{
      //   key: "1",
      //   title: '标题1'
      // },{
      //   key: "2",
      //   title: '标题2'
      // }],
      // render(item: any) {
      //   return item.title
      // },
      api: '/test/transfer',
      footer() {
        return h('span','=footer=')
      }
    }
  },{
    name: 'treeSelect',
    label: '树选择',
    component: 'TreeSelect',
    componentProps: {
      placeholder: '请选择',
      suffixIcon(){
        return h(SmileOutlined)
      },
      api: '/test/cascader'
    }
  },{
    name: 'upload',
    label: '上传',
    component: 'Upload',
    componentProps: {
      placeholder: '请选择文件',
      default() {
        return h(Button,{},{
          default(){
            return '上传文件'
          }
        })
      },
      showUploadList:{ showDownloadIcon: true, showRemoveIcon: true },
      //action: '/sys/fileInfo/upload',
      //getFileInfoUrl: '/sys/fileInfo/getByFileInfoIds'
      downloadIcon(){
        return '下载'
      }
    }
  },{
    hasFeeback: true,
    name: 'sex',
    label: '字典-性别',
    component: 'Dict',
    componentProps: {
      placeholder: '请选择',
      code: 'sex'
    }
  },{
    hasFeeback: true,
    name: 'roleType',
    label: '字典-角色类型',
    component: 'Dict',
    componentProps: {
      placeholder: '请选择',
      code: 'sys_role_role_type',
      mode: 'multiple'
    }
  },{
    name: 'detail',
    label: '编辑回显',
  }]
})
const handleReset = () => {
  console.log("您重置了")
}
const handleOk = (values: any) =>{
  const fun = values.id?postUpdate:postSave
  formRef.value.setLoading(true)
  fun(values).then(()=>{
    message.success("提交成功")
  }).finally(()=>{
    formRef.value.setLoading(false)
  })
}
onMounted(()=>{
  console.log(formRef.value)
})
</script>
<style lang="less" scoped>

</style>